<template>
    <h2>用户理财明细</h2>
    <table class="table table-bordered">
        <thead>
            <tr style="background-color:aqua;">
                <td>用户登录账号</td>
                <td>理财产品名称</td>
                <td>年收益</td>
                <td>购买金额</td>
                <td>购买时间</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.UF_Id">
                <td>{{ item.UL_Name }}</td>
                <td>{{ item.F_Name }}</td>
                <td>{{ item.F_APY }}</td>
                <td>{{ item.UF_Money }}</td>
                <td>{{ item.UF_Time.substring(0, 10) }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'

//接受地址栏中的ID
const route = useRoute();
const Fid = route.params.Fid;

//创建数组用于接受返回的数据
const data = ref([{
    UF_Id: '',
    UL_Name: '',
    F_Name: '',
    F_APY: '',
    UF_Money: '',
    UF_Time: ''
}])

//生命周期钩子
onMounted(() => {
    axios({
        method: 'get',
        url: "https://localhost:44305/api/Finans/ShowUserFinanInfo",
        params: {
            Fid: Fid
        }
    })
        .then(function (res) {
            data.value = res.data;
        })

})
</script>